<template>


    <dv-border-box11 class="left-buttom" title="办结统计" :animate="true">
        <div class="left-buttom-box1">
            <div class="capsule">
                <dv-capsule-chart :config="config" style="width:100%;height: 100%">

                </dv-capsule-chart>
            </div>
        </div>
        <div class="left-buttom-box2">
            <dv-charts :option="option" style="width:100%;height: 100%"></dv-charts>
        </div>
    </dv-border-box11>


</template>
<script setup>
const config = reactive({
    data: [
        { name: '安徽', value: 167 },
        { name: '江苏', value: 12 },
        { name: '广东', value: 67 },
        { name: '北京', value: 57 },
        { name: '海南', value: 117 }
    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#32c5e9'],
    unit: "万元",
    showValue: true
})

const option = ref({
    title: {
        text: "统计趋势",
        style: {
            fill: "#fff"

        }
    },
    xAxis: {
        name: "第一周",
        nameTextStyle: {
            fill: '#fff'
        },
        data: ['周一', '周二', '周三', '周四'],
        axisLabel: {
            style: {
                fill: '#fff'
            }
        },
        //针对的是x轴与y轴的线
        axisLine: {
            style: {
                stroke: '#fff'
            }
        },
        //x轴上的刻度线
        axisTick: {
            style: {
                stroke: '#fff'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        name: "销售额",
        nameTextStyle: {
            fill: '#fff'
        },
        data: 'value',
        axisLabel: {
            style: {
                fill: '#fff'
            }
        }, axisLine: {
            style: {
                stroke: '#fff'
            }
        }
    },
    series: [
        {
            data: [1200, 1211, 2099, 1221],
            type: "bar",
            gradient: {
                color: ['#37a2da', '#67e0e3']
            }
        }
    ]
})
</script>

<style scoped>
.left-buttom {
    width: 100%;
    height: 440px;
}

.left-buttom-box1 {

    height: 150px;
}

.capsule {
    padding-top: 50px;
    margin: 0 20px;
}

.left-buttom-box2 {
    height: 260px;
    margin-top: 20px;

}
</style>